<template>
	<view>
		
		<view v-for="(item,index) in notifications" :key="index">
			<view class="cflex wrap_nb" v-if="item.read_at">
				<view class="dflex aic pb12 jcsb" @click="testingExist" :data-topicid="item.data.topic_id">
					<view class="message_image">
						<u-avatar :src="item.data.user_avatar" size="45" mode='aspectFill'></u-avatar>
					</view>
					<view class="cflex ml15 fg1 mr12">
						<text class="f12">{{ item.data.user_name }}</text>
						<text class="f10 mt5 u-line-1 ca3a3a3">{{ $u.timeFrom(Date.parse(item.created_at, false)) }}点赞了你的瞬间 </text>
						<text class="f12 mt5 u-line-1">{{ item.data.topic_title }}</text>
					</view>	
					<u-avatar :src="item.data.topic_cover" shape="square" mode='aspectFill' size="45"></u-avatar>			
				</view>
				<u-line></u-line>
			</view>
			<view class="cflex wrap_nb bg_eee" v-else>
				<view class="dflex aic pb12 jcsb" @click="readMessage" :data-topicid="item.data.topic_id" :data-likeid="item.id" :data-readindex="index">
					<view class="message_image p_relative">
						<view class="unread p_fix"></view>
						<u-avatar :src="item.data.user_avatar" size="45" mode='aspectFill'></u-avatar>
					</view>
					<view class="cflex ml15 fg1 mr12">
						<text class="f12">{{ item.data.user_name }}</text>
						<text class="f10 mt5 u-line-1 ca3a3a3">{{ $u.timeFrom(Date.parse(item.created_at, false)) }}点赞了你的瞬间 </text>
						<text class="f12 mt5 u-line-1">{{ item.data.topic_title }}</text>
					</view>	
					<u-avatar :src="item.data.topic_cover" shape="square" mode='aspectFill' size="45"></u-avatar>			
				</view>
				<u-line></u-line>
			</view>
		</view>
		
		<view class="empty_list" v-if="empty" style="margin-top: 170px;">
			<u-empty mode="list" text="还没有任何消息,多多发帖互动哦~"></u-empty>
		</view>
		
		<bottomMenu ref="bottom"></bottomMenu>
	</view>
</template>

<script>
	import props from './props.js';
	export default {
		mixins: [props],
		data() {
			return {
				empty : false,
			}
		}
	}
</script>

<style>
	.message_image {
		width: 100rpx;
		display: flex;
	}
</style>
